<!--
 * @Description: DOM操作
 * @Author: rendc
 * @Date: 2021-09-10 11:32:15
 * @LastEditors: rendc
 * @LastEditTime: 2021-09-10 12:08:34
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM操作</title>
  <script src="../js/jquery.js"></script>
</head>

<body>
  <div id="app">
    这是一个div
    <p>123</p>
  </div>
  <div>2</div>
  <div>3</div>
  <p>p1</p>
</body>
<script>
  // 删除元素
  // $("#app").remove();
  $("div").remove("#app");
  // 删除子元素
  // $("#app").empty();

  // 在当前元素内部操作
  // $("#app").append("追加文本");
  // $("#app").prepend("在开头添加文本 1.");
  // 追加新元素
  // var p1 = "<p>p1</p>"
  // var p2 = "<p>p2</p>"
  // $("#app").append(p1, p2);
  // $("#app").prepend(p1, p2);

  // 在当前元素外部操作
  // $("#app").after("追加文本");
  // $("#app").before("在开头添加文本 1.");
  // var p1 = "<p>p1</p>"
  // var p2 = "<p>p2</p>"
  // $("#app").after(p1, p2);
  // $("#app").before(p1, p2);
</script>

</html>